<!-- 状态详情 -->

<template>
  <div class="FaceLib-StatusDetail marginBottom">
    <b>{{ obj.name }}</b>

    <div v-for="item in obj.faceModelRecordDto" :key="item.id" class="flex">
      <img :src="getImg(item)" />
      <span>{{ item.deviceName }}</span>

      <div v-if="item.syncStatus === 2" v-bind="props2">建模中</div>
      <div v-else-if="item.syncStatus === 3" v-bind="props3">建模成功</div>
      <div v-else-if="item.syncStatus === 4" v-bind="props4">建模失败</div>
      <div v-else v-bind="props1">未建模</div>

      <BtnText v-if="![2, 3].includes(item.syncStatus)" title="重新建模" @click="toSubmit(item)" />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import StatusDetail from '../../../FaceLib/MyList/StatusDetail'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'StatusDetail',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: StatusDetail.props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: StatusDetail.computed,

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取图片
     */
    getImg: StatusDetail.methods.getImg,

    /**
     * 点击提交
     */
    toSubmit({ facePersonId, faceDeviceId }) {
      Object.assign(this.one, { facePersonId, faceDeviceId })
      this.startSubmit()
    },
  },
}
</script>

<style lang="scss">
@import '../../../FaceLib/MyList/StatusDetail/index.scss';
</style>
